<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Vue3 | Dropdown</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- flag-icon-css -->
  <link rel="stylesheet" href="plugins/flag-icon-css/css/flag-icon.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="css/adminlte.min.css">
</head>
<body>
    <div id="app">
      <lte-layout>
        <!-- 顶部页头 -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light" style="min-height:3.5rem;">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#" @click.prevent ref="pushmenuBtn"><i class="fas fa-bars"></i></a>
            </li>
          </ul>
        </nav>

        <!-- 左侧菜单 -->
        <lte-main-sidebar :push-menu="pushmenuBtn">
          <a href="#" class="brand-link">
            <img src="img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
            <span class="brand-text font-weight-light">AdminLTE 3 + Vue3</span>
          </a>
        </lte-main-sidebar>

        <!-- 工作区 -->
        <div class="content-wrapper">
          
        </div>

        <!-- 底部页脚 -->
        <footer class="main-footer" style="min-height:3.5rem;">
          Footer
        </footer>
      </lte-layout>
    </div>
</body>
<script src="js/vue.global.3.2.26.js"></script>
<!-- 路由 -->
<script src="js/vue-router.global.js"></script>
<!-- 动画 -->
<script src="js/animations.js"></script>
<!-- 组件 -->
<script src="js/Layout.js"></script>
<script src="js/Fullscreen.js"></script>

<script>
  const MainSidebar = {
    name: "LteMainSidebar",
    props: {
      pushMenu:  Object, // elment引用
    },
    setup(props, context) {
      const overlay = Vue.ref(null);
        
      let autoCollapseSize = 992;
      let windowWidh = null;

      const toggleMenu = () => {
          if (!document.body.classList.contains("sidebar-collapse")) {
            collapseMenu();
          } else {
            openMenu();
          }
      }

      const windowed = () => {
          windowWidh = window.innerWidth || document.documentElement.clientWidth;
      }

      const collapseMenu = () => {
          document.body.classList.add("sidebar-collapse");
          //document.body.classList.add("sidebar-is-opening");
          document.body.classList.remove("sidebar-open");
          if (windowWidh < autoCollapseSize) {
              document.body.classList.add("sidebar-closed");
          }
      }

      const openMenu = () => {
          //console.log(document.body.classList)
          document.body.classList.remove("sidebar-collapse");
          document.body.classList.add("sidebar-open");
          if (windowWidh < autoCollapseSize) {
              document.body.classList.remove("sidebar-closed");
          }
      }

      Vue.onMounted(()=> {
          windowed();

          if (windowWidh < autoCollapseSize) {
              collapseMenu();
          }

          document.addEventListener("click", function(event) {
            const pushmenu = props.pushMenu;
            console.log('pushmenu', pushmenu)
            if (pushmenu && pushmenu.contains(event.target)) {
              toggleMenu();
              return;
            }
            //console.log("overlay click", overlay, event)
            // 只有点击overlay层时才关闭菜单（手机上该层才会出现）
            if (event.target !== overlay.value) {
              return;
            }
            if (windowWidh < autoCollapseSize) {
              collapseMenu();
            }
          });
          window.addEventListener("resize", windowed);
      })

      Vue.onUnmounted(()=> {
        window.removeEventListener("resize", windowed);
      })
      
      return {
          overlay,
      }
    },
    template: `
      <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <slot></slot>
      </aside>
      <teleport to="body"><div id="sidebar-overlay" ref="overlay"></div></teleport>
    `
  }

  Vue.components = Vue.components || [];
  Vue.components.push(MainSidebar);
</script>

<script type="text/javascript">
  const app = Vue.createApp({
    setup() {
      // 折叠侧边栏按钮
      const pushmenuBtn = Vue.ref(null);
      return {
        pushmenuBtn
      }
    }
  });
  Vue.components.forEach(element => {
    app.component(element.name, element);
  });

  app.mount('#app');
</script>
</html>